<template>
    <div class="son2">
        <h3>SonDemo2</h3>
        <h3>组合式api : props</h3>
        <h3 @click="editTitle">calick---{{ tle }}</h3>
        <p>des: {{ des }}</p>
        <p>user.name : {{ user.name }}</p>
        <p>user.sex : {{ user.sex }}</p>
        <div v-show="isShow" class="isShowHide">显示或隐藏</div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';


const props = defineProps({
    title: {
        type: String,
        required: true
    },
    des: {
        type: [String, Number],
        default: 'son2默认值des'
    },
    dao: {
        type: Object,
        default() {
            return {
                name: '青龙偃月刀'
            }
        }
    },
    user: {
        type: Object,
        default(rawProps: any) {  // rawProps：获取在自己之前的 Props 的属性值
            console.log(rawProps, 'rawProps-son2');
            return {
                name: '志超--' + JSON.stringify(rawProps),
                sex: 1
            }
        }
    },
    des2: {
        type: [String, Number],
        default: 'son2默认值des2'
    },
    // 函数的默认值
    PropH: {
        type: Function,
        default() {
            console.log('子组件son2的props函数被调用');
            return '函数的默认值'
        }
    },


})

const tle = ref(props.title)
const isShow = ref(false)
const sonTitle = ref('son2组件的sonTitle')

const showHandler = () => {
    isShow.value = !isShow.value
}

const editTitle = () => {
    tle.value = '可以修改被props的值初始化后的状态变量'
    // 调用PropH函数，并传入两个参数
    props.PropH(sonTitle.value, showHandler)
}

</script>

<style lang="scss" scoped>
.son2 {
    border: 3px solid deepskyblue;
    padding: 10px;
    margin: 10px;
}

.isShowHide {
    height: 100px;
    width: 100px;
    background-color: cyan;
}
</style>